<template>
    <div class="">
        <div class="big-main-box-item">
            <h3>{{props.titleName}}</h3>
            <div class="big-main-box-item-main" v-if="props.defaultList.length">
                <div class="big-main-box-item-text" v-for="item in props.defaultList" :key="item.id">
                    <span class="text-color">{{item.title}}</span>
                    <span :class="item.color ? item.color : 'text-default-color' ">{{item.value}}</span>
                </div>
                <slot name="Tcurve"></slot>
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    titleName:{
        type:String,
        default:""
    },
    defaultList:{
        type:Array,
        default:() => []
    }
})
</script>
<style lang="scss" scoped>
.big-main-box-item {
    width: 21.5rem;
    height: 16.8rem;
    background: url("@/assets/image/icon8.png") no-repeat;
    background-size: auto 100%;

    h3 {
        font-size: 2rem;
        color: #fff;
        padding: 1.2rem 0 0 4rem;
        font-weight: 400;
    }

    .big-main-box-item-main {
        font-size: 1.4rem;
        color: #fff;
        padding: 1rem 3rem;

        .big-main-box-item-text {
            display: flex;
            justify-content: space-between;
            line-height: 1.5;

            .text-default-color {
                color: #00FFFF
            }

            .text-color {
                opacity: .8;
            }

            .text-grey-color {
                opacity: .8;
            }
            .text-red-color {
               color:#f00;
            }
        }

    }

}
</style>
  